<template>
  <div class="page-container-padding">
    <div class="time-title">
      <span class="date-text">{{ showDatetime.substring(0, 11) }}</span>
      <span class="week-text">{{ showDatetime.substring(11, 15) }}</span>
      <span class="time-text">
        <el-tag>{{ showDatetime.substring(15, 24) }}</el-tag>
      </span>
    </div>
    <div class="week-cal">
      <el-row class="week-text">
        <el-col :span="3"><div class="wcol">一</div></el-col>
        <el-col :span="3"><div class="wcol">二</div></el-col>
        <el-col :span="3"><div class="wcol">三</div></el-col>
        <el-col :span="3"><div class="wcol">四</div></el-col>
        <el-col :span="3"><div class="wcol">五</div></el-col>
        <el-col :span="3"><div class="wcol">六</div></el-col>
        <el-col :span="3"><div class="wcol">日</div></el-col>
      </el-row>
      <el-row class="day-text">
        <el-col v-for="dt in weekDates" :key="dt.date" :span="3">
          <div
            :class="dt.date === currentDate ? 'cur-day' : 'other-day'"
            @click="selectWeekDate(dt)"
          >
            {{ dt.date }}
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 日历正文 -->
    <el-divider></el-divider>
    <div
      v-if="calendars.data.length > 0"
      v-infinite-scroll="addLoadingCalendar"
      class="cal-container"
    >
      <div v-for="item in calendars.data" :key="item.id" class="cal-item">
        <el-row>
          <el-col :span="3">
            <div class="timecol">
              <div class="time">{{ item.publish_time.substring(11, 16) }}</div>
              <div
                v-if="item.country_info && item.country_info.flag"
                class="flag"
              >
                <el-avatar circle :src="item.country_info.flag"></el-avatar>
              </div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="contentcol">
              <div class="title">{{ item.title }}</div>
              <div>
                <span>前值：{{ item.pre_value }}</span>
                <span style="margin-left: 20px">
                  预测值：{{ item.fur_value || '--' }}
                </span>
              </div>
              <div>
                <el-rate
                  :value="parseInt(item.importance)"
                  disabled
                  text-color="#ff9900"
                  :max="3"
                ></el-rate>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="realcol">
              <div class="label">公布值</div>
              <div class="value">{{ item.real_value || '--' }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="24">
            <el-divider></el-divider>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <el-divider v-if="calendars.noMoreData" content-position="center">
              没有更多经济数据了
            </el-divider>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else>
      <el-row>
        <el-col :span="21">
          <el-empty
            :description="
              calendars.isLoading ? '数据正在加载中...' : '今日暂无经济数据'
            "
          ></el-empty>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showDatetime: '',
        timer: null,
        currentDate: '',
        weekDates: [],

        calendars: {
          isLoading: false,
          noMoreData: false,
          queryDate: '',
          page: 1,
          totalPage: 1,
          totalCount: 0,
          data: [],
        }, // 日历内容
      }
    },
    created() {
      this.getShowDatetime()
    },
    mounted() {
      this.getWeekDays()
      this.getCurrentCalContent()
      this.timer = setInterval(this.getShowDatetime, 1000)
    },
    destroyed() {
      clearInterval(this.timer)
    },
    methods: {
      getShowDatetime() {
        const date = new Date()
        let week
        switch (date.getDay()) {
          case 1:
            week = '星期一'
            break
          case 2:
            week = '星期二'
            break
          case 3:
            week = '星期三'
            break
          case 4:
            week = '星期四'
            break
          case 5:
            week = '星期五'
            break
          case 6:
            week = '星期六'
            break
          default:
            week = '星期天'
        }
        let year = date.getFullYear()
        let month = this.addZero(date.getMonth() + 1)
        let days = this.addZero(date.getDate())
        let hours = this.addZero(date.getHours())
        let minutes = this.addZero(date.getMinutes())
        let seconds = this.addZero(date.getSeconds())
        let ndate = `${year}年${month}月${days}日 ${week} ${hours}:${minutes}:${seconds}`
        this.showDatetime = ndate
      },

      // 设置当前周日期
      getWeekDays() {
        this.currentDate = this.addZero(new Date().getDate())
        const curDay = new Date().getDay()
        let preDeltaDays = curDay - 1
        if (curDay === 0) {
          preDeltaDays = 7
        }
        const startDate = new Date(
          new Date().getTime() - 24 * 60 * 60 * 1000 * preDeltaDays
        )
        this.weekDates = []
        for (let i = 0; i < 7; i++) {
          let dt = new Date(startDate.getTime() + 24 * 60 * 60 * 1000 * i)
          this.weekDates.push({
            date: this.addZero(dt.getDate()),
            o_date: dt,
          })
        }
        // 设置当前查询日期
        const current = new Date()
        let year = current.getFullYear()
        let month = this.addZero(current.getMonth() + 1)
        let days = this.addZero(current.getDate())
        this.calendars.queryDate = `${year}-${month}-${days}`
      },

      // selectWeekDate
      selectWeekDate(oDate) {
        console.log(oDate)
        this.currentDate = oDate.date
        const sData = oDate.o_date
        let year = sData.getFullYear()
        let month = this.addZero(sData.getMonth() + 1)
        let days = this.addZero(sData.getDate())
        this.calendars.queryDate = `${year}-${month}-${days}`
        this.calendars.page = 1
        this.calendars.totalCount = 0
        this.calendars.data = []
        this.getCurrentCalContent()
      },

      // 获取当前日历
      getCurrentCalContent() {
        // 原生实现jsonp
        this.calendars.isLoading = true
        let url = `https://rl.cj.sina.com.cn/client/api/calendar_v2/get_economic_lists?callback=calendarCallback`
        url += `&start_time=${this.calendars.queryDate}`
        url += `&end_time=${this.calendars.queryDate}`
        url += `&page=${this.calendars.page}&num=30&version=4.2.9`
        window.calendarCallback = (res) => {
          this.calendarsBack(res.result.data)
        }
        let script = document.createElement('script')
        script.src = url
        document.body.appendChild(script)
      },

      // 日历返回
      calendarsBack(retData) {
        this.calendars.totalCount = retData.total_num
        this.calendars.totalPage = retData.total_page
        this.calendars.isLoading = false
        if (this.calendars.page === 1) {
          this.calendars.data = retData.data
        } else {
          for (let i = 0; i < retData.data.length; i++) {
            this.calendars.data.push(retData.data[i])
          }
        }
      },

      //
      addLoadingCalendar() {
        if (this.calendars.page >= this.calendars.totalPage) {
          this.calendars.noMoreData = true
          return
        }
        this.calendars.noMoreData = false
        this.calendars.page = this.calendars.page + 1
        this.getCurrentCalContent()
      },

      addZero(t) {
        return t < 10 ? '0' + t : t
      },
    },
  }
</script>

<style scoped lang="scss">
  .time-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
    .time-text {
      color: #1890ff;
      margin-left: 6px;
    }
  }
  .week-cal {
    font-size: 20px;
    font-weight: 700;
    margin: 22px 0;
    margin-left: 16px;
    .week-text {
      color: #888;
      .wcol {
        width: 30px;
        height: 30px;
        line-height: 30px;
        padding: 10px;
        text-align: center;
      }
    }
    .day-text {
      font-size: 22px;
      cursor: pointer;
    }
    .cur-day {
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 10px;
      text-align: center;
      color: #fff;
      background-color: #1890ff;
      border-radius: 25px;
    }
    .other-day {
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 10px;
      text-align: center;
    }
  }

  .cal-container {
    height: calc(100vh - 292px);
    overflow: auto;
    .cal-item {
      font-size: 20px;
      .timecol {
        width: 100px;
        text-align: center;
      }
      .contentcol {
        color: #000;
        line-height: 30px;
        .title {
          font-size: 22px;
        }
      }
      .realcol {
        line-height: 30px;
        text-align: center;
        border: 1px solid #4e8bee;
        border-radius: 10px;
        // width: 180px;
        .label {
          background-color: #f5f8fd;
          line-height: 30px;
          color: #4f8bee;
          border-radius: 10px 10px 0 0;
          padding: 4px 0;
          border-bottom: 1px solid #4e8bee;
        }
        .value {
          padding: 4px 0;
          line-height: 30px;
          min-height: 30px;
        }
      }
    }
  }
</style>
